<template>
  <div class="Person">
    <div class="path">
      <span>{{ path }}</span>
    </div>
    <div class="PersonInner">
      <!-- 选择列表 -->
      <div class="PersonLeft">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu default-active="1" class="el-menu-vertical-demo">
              <el-menu-item
                index="1"
                @click.native="goto('购物车', '/index/Person/ShoppingCar')"
              >
                <i class="el-icon-shopping-cart-full"></i>
                <span slot="title">购物车</span>
              </el-menu-item>
              <el-menu-item
                index="2"
                @click.native="goto('个人中心', '/index/Person/Order')"
              >
                <i class="el-icon-notebook-2"></i>
                <span slot="title">我的订单</span>
              </el-menu-item>
              <el-menu-item
                index="3"
                @click.native="goto('个人设置', '/index/Person/BasicSetting')"
              >
                <i class="el-icon-setting"></i>
                <span slot="title">个人设置</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>

      <!-- 展示列表 -->
      <div class="PersonRight">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__fadeInLeft"
          leave-active-class="animate__fadeOutRight"
        >
          <router-view />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "Person",
  data() {
    return {
      path: "首页 > 个人中心 > 购物车",
    };
  },
  methods: {
    goto: function (name, url) {
      this.path = "首页 > 个人中心 > " + name;
      this.$router.push(url);
    },
  },
};
</script>

<style lang="less" scoped>
.animated {
  animation-duration: 0.1s;
  animation-fill-mode: both;
}

.Person {
  width: 100%;
  .path {
    width: 1300px;
    margin: 0 auto;
    margin-top: 40px;
    padding-bottom: 20px;
    span {
      font-size: 18px;
    }
  }
  .PersonInner {
    display: flex;
    justify-content: left;
    width: 1300px;
    margin: 0 auto;
    .PersonLeft {
      height: 700px;
      border: 1px solid gray;
      width: 200px;
      .el-col-12 {
        width: 100%;
      }
    }
    .PersonRight {
      height: 700px;
      width: 1100px;
      border: 1px solid gray;
      border-left: none;
      overflow: hidden;
      position: relative;
    }
    .el-menu-item {
      width: 200px;
    }
  }
}
</style>